<template>
	<div>
		<ul class="mui-table-view">
			<li class="mui-table-view-cell mui-media" v-for="item in newslistb" :key="item.id">
				<!-- 因为 id 是表达式，所以 :to 要绑定，原字符串再用一层单引号包裹 -->
				<router-link :to="'/home/newsinfo/' + item.id">
					<img class="mui-media-object mui-pull-left" :src="item.img_url">
					<div class="mui-media-body">
						<h1>{{ item.title }}</h1>
						<p class='mui-ellipsis'>
							<!-- <span>发表时间：{{ item.add_time | dateFormat }}</span> -->
							<!-- 这样只显示年月日不显示具体时间 -->
							<span>发表时间：{{ item.add_time | dateFormat('YYYY-MM-DD') }}</span>
							<span>点击：{{ item.click }}次</span>
						</p>
					</div>
				</router-link>
			</li>

<!-- 
			<li class="mui-table-view-cell mui-media">
				<a href="javascript:;">
					<img class="mui-media-object mui-pull-left" src="http://localhost:3000/public/img/muwu.jpg">
					<div class="mui-media-body">
						<h1>幸福</h1>
						<p class='mui-ellipsis'>
							<span>发表时间：2020-12-22 12:12:12</span>
							<span>点击：0次</span>
						</p>
					</div>
				</a>
			</li>
			<li class="mui-table-view-cell mui-media">
				<a href="javascript:;">
					<img class="mui-media-object mui-pull-left" src="http://localhost:3000/public/img/cbd.jpg">
					<div class="mui-media-body">
						<h1>幸福</h1>
						<p class='mui-ellipsis'>
							<span>发表时间：2020-12-22 12:12:12</span>
							<span>点击：0次</span>
						</p>
					</div>
				</a>
			</li>
 -->

		</ul>
	</div>
</template>

<script>
	// 按需求导入 Toast 样式
	import { Toast } from 'mint-ui'

	export default{
		data(){
			return{
				// 真新闻列表
				newslist:[],
				// 假新闻列表
				newslistb:[
					{
						id:11,
						title:"1季度多家房企利润跌幅超50%，去库存促销战打响！",
						add_time:"2020-12-25T11:11:11.000Z",
						zhaiyao:"房企一季度销售业绩已经陆续公布，克尔瑞研究中心统计",
						click:111,
						img_url:"http://localhost:3000/public/img/shuijiao.jpg"
					},
					{
						id:12,
						title:"买房还是炒股，2020年买房无法拒绝的5大理由！",
						add_time:"2020-12-25T12:12:12.000Z",
						zhaiyao:"转眼间2020年已经过去了12个月，在这短短的12个月",
						click:112,
						img_url:"http://localhost:3000/public/img/muwu.jpg"
					},
					{
						id:13,
						title:"1季度多家房企利润跌幅超50%，去库存促销战打响！",
						add_time:"2020-12-25T13:13:13.000Z",
						zhaiyao:"房企一季度销售业绩已经陆续公布，克尔瑞研究中心统计",
						click:113,
						img_url:"http://localhost:3000/public/img/cbd.jpg"
					},
					{
						id:14,
						title:"1季度多家房企利润跌幅超50%，去库存促销战打响！",
						add_time:"2020-12-25T11:11:11.000Z",
						zhaiyao:"房企一季度销售业绩已经陆续公布，克尔瑞研究中心统计",
						click:114,
						img_url:"http://localhost:3000/public/img/shuijiao.jpg"
					},
					{
						id:15,
						title:"买房还是炒股，2020年买房无法拒绝的5大理由！",
						add_time:"2020-12-25T12:12:12.000Z",
						zhaiyao:"转眼间2020年已经过去了12个月，在这短短的12个月",
						click:115,
						img_url:"http://localhost:3000/public/img/muwu.jpg"
					},
					{
						id:16,
						title:"1季度多家房企利润跌幅超50%，去库存促销战打响！",
						add_time:"2020-12-25T13:13:13.000Z",
						zhaiyao:"房企一季度销售业绩已经陆续公布，克尔瑞研究中心统计",
						click:116,
						img_url:"http://localhost:3000/public/img/cbd.jpg"
					},
					{
						id:17,
						title:"1季度多家房企利润跌幅超50%，去库存促销战打响！",
						add_time:"2020-12-25T11:11:11.000Z",
						zhaiyao:"房企一季度销售业绩已经陆续公布，克尔瑞研究中心统计",
						click:117,
						img_url:"http://localhost:3000/public/img/shuijiao.jpg"
					},
					{
						id:18,
						title:"买房还是炒股，2020年买房无法拒绝的5大理由！",
						add_time:"2020-12-25T12:12:12.000Z",
						zhaiyao:"转眼间2020年已经过去了12个月，在这短短的12个月",
						click:118,
						img_url:"http://localhost:3000/public/img/muwu.jpg"
					},
					{
						id:19,
						title:"1季度多家房企利润跌幅超50%，去库存促销战打响！",
						add_time:"2020-12-25T13:13:13.000Z",
						zhaiyao:"房企一季度销售业绩已经陆续公布，克尔瑞研究中心统计",
						click:119,
						img_url:"http://localhost:3000/public/img/cbd.jpg"
					},
					{
						id:20,
						title:"1季度多家房企利润跌幅超50%，去库存促销战打响！",
						add_time:"2020-12-25T11:11:11.000Z",
						zhaiyao:"房企一季度销售业绩已经陆续公布，克尔瑞研究中心统计",
						click:120,
						img_url:"http://localhost:3000/public/img/shuijiao.jpg"
					},
					{
						id:21,
						title:"买房还是炒股，2020年买房无法拒绝的5大理由！",
						add_time:"2020-12-25T12:12:12.000Z",
						zhaiyao:"转眼间2020年已经过去了12个月，在这短短的12个月",
						click:121,
						img_url:"http://localhost:3000/public/img/muwu.jpg"
					},
					{
						id:22,
						title:"1季度多家房企利润跌幅超50%，去库存促销战打响！",
						add_time:"2020-12-25T13:13:13.000Z",
						zhaiyao:"房企一季度销售业绩已经陆续公布，克尔瑞研究中心统计",
						click:122,
						img_url:"http://localhost:3000/public/img/cbd.jpg"
					}
				]
			}
		},

		/*
		created(){
			this.getNewsList()
		},
		*/

		methods:{
			getNewsList(){
				this.$http.get('getnews').then(result => {
					console.log(result)
					if(result.status === 200){
						// 请求数据成功
						Toast('请求数据成功！！')
						this.newslist = result.body
					} else {
						// 请求数据失败
						Toast('加载轮播图失败！！')
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mui-table-view{
		li{
			h1{
				font-size: 15px;
			}
			.mui-ellipsis{
				font-size: 12px;
				color: #226aff;
				/* 把 p 标签内容左右对齐 */
				display: flex;
				justify-content: space-between;
			}
		}
	}
</style>